<template>
	<scroll-view style="height: 100%;" scroll-y="true">
		<view class="feedback-form speak-form" style="margin: 0px 30px;">
			<uni-forms>
				<uni-forms-item class="no-border">
					<view class="label">
						活动分类：
					</view>
					<radio-group @change="radioChange" class="radio-group">
						<label class="radio" v-for="(item, index) in items" :key="item.value">
							<radio :value="item.value" :checked="formData.sign == item.value" />{{item.name}}
						</label>
					</radio-group>
				</uni-forms-item>
				<uni-forms-item>
					<view class="label">
						标题：
					</view>
					<view class="title">
						<uni-easyinput type="textarea" autoHeight v-model="formData.title" :clearable="false"
							placeholder="请输入" />
					</view>

				</uni-forms-item>
				<uni-forms-item>
					<view class="label">
						内容：
					</view>
					<uni-easyinput class="content" type="textarea" maxlength="-1" autoHeight v-model="formData.content"
						placeholder="请输入"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item>
					<view class="label">
						时间：
					</view>
					<view class="title">
						<uni-datetime-picker
							v-model="range"
							type="daterange"
							rangeSeparator="至"
						/>
					</view>

				</uni-forms-item>
				<uni-forms-item>
					<view class="label">
						地址：
					</view>
					<view class="title">
						<uni-easyinput type="textarea" autoHeight v-model="formData.address" :clearable="false"
							placeholder="请输入" />
					</view>

				</uni-forms-item>
				<uni-forms-item class="no-border">
					<view class="label">
						附件：
					</view>
					<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" :auto-upload="false"
						@select="selectImgs" @delete="removeImg" />
				</uni-forms-item>

			</uni-forms>
			<button type="primary" class="btn delete" @click="onSubmit()" v-if="id">修改并提交</button>
			<button type="primary" class="btn delete" @click="onSubmit()" v-else>提交</button>

		</view>
	</scroll-view>
</template>

<script>
	import request from '../../common/request.js'
	import upload from '../../common/upload.js'
	export default {
		props: ['id'],
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		data() {
			return {
				formData: {
					title: '',
					content: '',
					sign: '1',
					address: '',
					start_time: '',
					end_time: ''
				},
				timeout: null,

				imageValue: [],
				uploadImages: [],
				items: [{
					value: '1',
					name: '联系界别群众'
				}, {
					value: '2',
					name: '服务为民'
				}],
				
				range: [],
			}
		},
		beforeDestroy() {
			if (this.timeout) {
				clearTimeout(this.timeout)
			}
		},
		mounted() {
			if (this.id) {
				this.getDetailData()
			}
		},
		methods: {
			radioChange(res) {
				this.formData.sign = res.detail.value
			},
			getDetailData() {
				request({
					url: '/Lxqz/detail',
					data: {
						masses_id: this.id
					},
					method: 'POST'
				}).then(res => {
					if (res.code == 1) {
						this.formData = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			selectImgs(data) {
				// console.log(data)
				this.uploadImages = this.uploadImages.concat(data.tempFilePaths)
			},
			removeImg(data) {
				this.uploadImages = this.uploadImages.filter(item => item != data.tempFilePath)
				this.imageValue = this.imageValue.filter(item => item.url != data.tempFilePath)
				// console.log(this.uploadImages)
			},
			imageUpload() {
				let tasks = []
				this.uploadImages.forEach(url => {
					tasks.push(
						upload({
							url: '/common/upload',
							file: url
						})
					);
				})
				return Promise.all(tasks);
			},
			async onSubmit() {
				let images = []
				if (this.uploadImages.length > 0) {
					let uploadImages = await this.imageUpload()
					uploadImages.forEach(item => {
						let imgData = JSON.parse(item)
						if (imgData.data.url) images.push(imgData.data.url)
					})
				}
				if (this.imageValue.length > 0) {
					this.imageValue.forEach(item => {
						let path = item.url.split('/uploads')
						let uploadUrl = (path[1] && ('/uploads' + path[1])) || ''
						images.push(uploadUrl)
					})
				}
				this.formData.meet_files = images.join(',')
				if (this.id) {
					let param = {
						masses_id: this.id,
						title: this.formData.title,
						content: this.formData.content,
						meet_files: this.formData.meet_files,
						address: this.formData.address,
						start_time: this.range[0] || '',
						end_time: this.range[1] || ''
					}
					request({
						url: '/Lxqz/edit',
						data: param,
						method: 'POST'
					}).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
							this.timeout = setTimeout(() => {
								let data = {
									page: 'form'
								}
								uni.$emit('showContent', data)
							}, 2000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				} else {
					this.formData.start_time = this.range[0] || '',
					this.formData.end_time = this.range[1] || ''
					request({
						url: '/Lxqz/add',
						data: this.formData,
						method: 'POST'
					}).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
							this.timeout = setTimeout(() => {
								let data = {
									page: 'form'
								}
								uni.$emit('showContent', data)
							}, 2000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},

		}
	}
</script>

<style scoped>

	.title .uni-easyinput__content-textarea {
		min-height: 20px !important;
	}

	.feedback-form {
		padding: 30px 0px 20px;
	}

	.label {
		font-size: 16px;
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.btn {
		margin-bottom: 15px;
		font-size: 14px;
		padding: 5px;
		border-radius: 8px;
	}

	.btn.delete {
		background-color: #2C60BE;
		margin-top: 60px;
	}
	
	.radio-group {
		line-height: 35px;
	}
	
	.radio-group .radio {
		margin-right: 20px;
	}
</style>